<gm:page title="Global Stock Watch" css="/css/g.css" class="googleTheme" >

    <!--
       Global Stock Watch (based on the GME Team's Maps Mashup sample).
       Markers are the major stock exchanges from around the world. Each
       one is associated with a leading index (i.e New York - S&P 500; 
       Shanghai - Shanghai Composite). The number in the bubbles is the
       percentage the index has changed (up, or down) since its previous
       close.   
   -->

  <script type="text/javascript">  
  <![CDATA[
     
     function test() {
        var urlSummaryPath = new GPath("summary"); 
        var quotes = google.mashups.getObjectById('myList').getData(); 
        var change = ""; 
        var num = "";
               

        for (var i = 0; i < quotes.size(); i += 1) {
          change = urlSummaryPath.getValue(quotes.entryAt(i));
          num = cropPercentageSign(change);          
          if (num < 0) {
            urlSummaryPath.setValue(quotes.entryAt(i), "<div style='background-color:ffffff;float:left;'>"
                                                        + change + "<img src='resources/down.png'/></div>");
          } else if (num > 0){
            urlSummaryPath.setValue(quotes.entryAt(i), "<div style='background-color:ffffff;float:left;'>"
          }                                             + change + "<img src='resources/up.png'/></div>");
        }
        
         
     }
     
     function cropPercentageSign(value){
        var length = value.length;
        var number = value.substr(0, (length - 1 ));
         alert(number)";
        return number;  
     }


  ]]></script>

  <div style="height:150px;">
    <table width="100%">
      <tr> 
        <td valign="top" align="left"><img src="resources/gmw.png"/></td>       
      </tr> 
    </table></div>

    <table width="900">
      
      <tr valign="top">
        <td width="300">
           <div style="font-size:80%;height:500px;overflow:auto;">
             <gm:list id="myList" 
                      data="http://pipes.yahoo.com/pipes/pipe.run?_id=UCE9uUpb3BGUP7PdJhOy0Q%26_render=rss" 
                      pagesize="40">
               <gm:handleEvent src="myMap" event="select"/>
            </gm:list>
          </div>
       </td>
       <td class="mainPanel">
         <gm:map id="myMap"
                 height="500px"
                 data="${myList}" 
                 latref="geo:lat" 
                 lngref="geo:long" 
                 infotemplate="detailTemplate">
           <gm:handleEvent src="myList" event="select"/>
         </gm:map>
         <input name="testButton" type="button" value="test" onclick="test();"/>
       </td>
       </tr>    
   </table>

   <gm:template id="detailTemplate">
     <div style="background-color:ffffff;" repeat="true">
       <gm:text ref="atom:title"/><br/>        
       <b><gm:html ref="atom:summary"/></b>
     </div>
   </gm:template>
    
</gm:page>




























